<template>
  <div class="wb-big-img" v-if="getItem">
    <img v-lazy="getItem.url"  @click.stop="onClickItem">
    <van-popup type="my-popup" ref="bigImgPopup">
      <img v-lazy="getItem.url">
      <i class="jy-icon-layer-closed btn-close right-20" @click.stop="onClose"></i>
    </van-popup>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'

export default {
  mixins: [utils, commonUtils],
  setup () {
    return {
      refId: 'bigImgPopup',
    }
  },
  methods: {
    onClickItem(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.isH5Edit) {
        return;
      }
      const component = this.$refs[this.refId]
      component.show()
    },
    onClose(e){
      e.stopPropagation()
      e.preventDefault()
      if (this.isH5Edit) {
        return;
      }
      const component = this.$refs[this.refId]
      component.hide()
    }
  }
};
</script>
<style lang="scss">
.wb-big-img{
  position: relative;
  
  h3, p{
    color: inherit;
    font-size: inherit;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .btn-close{
    position: absolute;
    right: var(--size-20);
    top: var(--size-20);
    font-size: var(--size-40);
    color: #ffffff;
  }
}
</style>

